<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const tiaozhuan = () => {
  router.push("/login");
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div class="logo">
          <img src="../../assets/imgs/zuan.png" alt="" width="60px" />
          <h2>祖安科技</h2>
        </div>
        <div class="mid">
          <router-link to="/main">首页</router-link>
          <router-link to="/cooperate">合作招商</router-link>
          <!-- <router-link to="/">关于我们</router-link> -->
        </div>
        <div class="login"></div>
        <div class="touxiang">
          <a @click="tiaozhuan()">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="50"
              height="60"
              viewBox="1 0 20 16"
            >
              <path
                fill="#0284c7"
                d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m0 7c2.67 0 8 1.33 8 4v3H4v-3c0-2.67 5.33-4 8-4m0 1.9c-2.97 0-6.1 1.46-6.1 2.1v1.1h12.2V17c0-.64-3.13-2.1-6.1-2.1"
              />
            </svg>
          </a>
        </div>
      </el-header>
    </el-container>
    <div style="margin-top: 80px"></div>
  </div>
  <router-view />
</template>

<style scoped>
.touxiang {
  line-height: 60px;
}
.login {
  display: flex;
  justify-content: flex-end;
  flex: 0.8;
  flex-direction: row-reverse;
}
a {
  margin-left: 40px;
  text-decoration: none;
  color: #cccccc;
  cursor: pointer;
}
a:hover {
  color: #0284c7;
}
a:link {
  color: #cccccc;
}
a:active {
  color: yellow;
}
.mid {
  display: flex;

  justify-content: center;
}
.el-header {
  background-color: #409eff;
  color: #fff;
  display: flex;
  box-shadow: 2px 5px 5px #cccccc;
  height: 80px;
  line-height: 80px !important;
  overflow: hidden;

  position: fixed; /* 固定在页面顶部 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保导航栏在其他元素之上 */
}
.el-main {
  padding: 0 !important;
  height: calc(100vh - 70px);
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: center;
  margin: 30px;
  color: green;
}
</style>
